<template>
  <div id="app">
    <h1>请选择你要计算的数</h1>
    <div class="box"  v-for="(val,index) in arr" :key="index">
      <input type="checkbox" :value= 'val' v-model="checkArr"/>
      <span>{{val}}</span>
    </div>
    <div class="box2">
        你选中的元素,累加的值和为: {{num}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      checkArr: []
    }
  },
  computed: {
    num () {
      // 使用reduce计算数组元素相加后的总和
      // reduce(执行函数,传递给函数的初始值)
      return this.checkArr.reduce((sum,item)=>{
        return sum += item
      },0)
    }
  }
}
</script>

<style scoped>
  .box {
    display: inline;
    font-size: 24px;
    margin-right: 10px;
  }
  input {
    width: 20px;
    height: 20px;
  }
  .box2 {
    list-style: none;
    font-size: 24px;
    color: #0f0;
    margin-top: 20px;
  }

</style>
